<template>
    <div class="addGoods">
        <el-alert title="添加商品信息" type="info" center show-icon>
        </el-alert>
        <el-steps :active="val - 0" style="margin: 20px 0;" finish-status="success" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <el-tabs :tab-position="tabPosition" style="height: 100%;" :before-leave="handeltab" @tab-click="handleClick"
            v-model="val">
            <el-tab-pane label="基本信息" name="0">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品名称" prop="goods_name">
                        <el-input v-model.trim="ruleForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="goods_price">
                        <el-input v-model.trim="ruleForm.goods_price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品重量" prop="goods_weight">
                        <el-input v-model.trim="ruleForm.goods_weight"></el-input>
                    </el-form-item>
                    <el-form-item label="商品数量" prop="goods_number">
                        <el-input v-model.trim="ruleForm.goods_number"></el-input>
                    </el-form-item>
                    <el-form-item label="商品分类" prop="goods_cat">
                        <el-cascader v-model="ruleForm.goods_cat" :options="options"
                            :props="{ expandTrigger: 'hover', label: 'cat_name', value: 'cat_id' }"
                            @change="handleChange"></el-cascader>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1">
                <div v-for="item, index in manys" :key="index">
                    {{ item.attr_name }}
                    <el-checkbox-group v-model="checkboxGroup1" size="small" style="margin: 20px 0;">
                        <el-checkbox :label="ele" v-for="ele, i in item.attr_vals" :key="i" border>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品属性" name="2">
                <div v-for="item, index in manys" :key="index">
                    {{ item.attr_name }}
                    <el-checkbox-group v-model="checkboxGroup1" size="small" style="margin: 20px 0;">
                        <el-checkbox :label="ele" v-for="ele, i in item.attr_vals" :key="i" border>
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
                <el-upload class="upload-demo" action="https://lianghj.top:8888/api/private/v1/upload"
                    :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="hander"
                    :on-success="handelok">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4">
                <quill-editor class="ql-editor" v-model="ruleForm.goods_content" ref="myQuillEditor"
                    :options="editorOption">
                </quill-editor>
                <el-button size="small" type="primary" @click="addGoodslist">添加商品</el-button>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import { getCategoriesList, addgoodlist, getaddgoodslist } from '../../utlis/api/shops/shopapi'
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    data() {
        return {
            active: 0,
            tabPosition: 'left',
            ruleForm: {
                goods_name: '12',
                goods_price: "12",
                goods_weight: "12",
                goods_number: '12',
                goods_cat: '',
                pics: [],
                goods_content: ''
            },
            rules: {
                goods_name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' }
                ],
                goods_price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' }
                ],
                goods_weight: [
                    { required: true, message: '请输入商品重量', trigger: 'blur' }
                ],
                goods_number: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' }
                ],
                goods_cat: [
                    { required: true, message: '请选择商品分类', trigger: 'blur' }
                ],
            },
            value: '',
            options: [],
            hander: {
                Authorization: localStorage.getItem('token')
            },
            letngths: 0,
            val: '0',
            checkboxGroup1: [],
            pid: '',
            manys: [],
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ direction: 'rtl' }], // 文本方向
                        [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                        ['link', 'image', 'video'] // 链接、图片、视频
                    ]
                },
                placeholder: '请输入正文'
            }
        }
    },
    methods: {
        handleRemove(file) {
            console.log(93, file);
            let picid = file.response.data.tmp_path
            let i = this.ruleForm.pics.findIndex(item => item.pic == picid)
            this.ruleForm.pics.splice(i, 1)
            console.log(this.ruleForm.pics);
        },
        handlePreview(file) {
            console.log(file);
        },
        handelok(val) {
            console.log(val);
            this.ruleForm.pics.push({ pic: val.data.tmp_path })
        },
        // 阻止下一步
        handeltab(val) {
            console.log(108, val);
            if (this.letngths != 3) {
                this.$message.error('必须选择分类')
                return false
            }

        },
        // tab切换
        handleClick() {
            if (this.val == '1') {
                let obj = {
                    id: this.pid,
                    sel: 'many'
                }
                getaddgoodslist(obj).then((res) => {
                    console.log(res);
                    this.manys = res.data.data
                    console.log(136, this.manys);
                    res.data.data.forEach((item) => {
                        item.attr_vals = item.attr_vals.split(',')
                    })
                })
            } else {
                let obj = {
                    id: this.pid,
                    sel: 'only'
                }
                getaddgoodslist(obj).then((res) => {
                    console.log(res);
                    this.manys = res.data.data
                    console.log(136, this.manys);
                    res.data.data.forEach((item) => {
                        item.attr_vals = item.attr_vals.split(',')
                    })
                })
            }
        },
        // 三级联动
        handleChange(value) {
            console.log(value);
            this.letngths = value.length
            this.pid = value[2]
        },
        // 获取三级联动
        getgoodlist() {
            getCategoriesList().then(res => {
                console.log(66, res);
                this.options = res.data.data
            })
        },
        // 添加商品
        addGoodslist() {
            this.val = '5'
            this.ruleForm.goods_cat = this.ruleForm.goods_cat.join(',')
            addgoodlist(this.ruleForm).then(res => {
                console.log(117, res);
                // this.$router.push('/goods')
            })
        },
    },
    created() {
        this.getgoodlist()
    },
    components: {
        quillEditor
    }
}
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>